<template>
  <div class="customer-add-edit">
    <ul class="details-tab-button">
      <li v-for="(item,index) in customerType" class="item" :class="{active:currentType==index}" @click="handleChange(item,index)">{{item.name}}</li>
    </ul>
    <template v-if="currentType=='0'">
      <div class="module-info">
        <mt-field label="仓库名称" placeholder="请输入仓库名称" v-model="post.depot"></mt-field>
        <mt-field label="联系人" placeholder="请输入联系人" v-model="post.contactPerson"></mt-field>
        <mt-field label="联系电话" placeholder="请输入联系电话" v-model="post.telephone"></mt-field>
        <mt-field label="联系地址" placeholder="请输入联系地址" v-model="post.address"></mt-field>
      </div>
    </template>
    <div v-if="currentType=='1'" class="module-car">

      <div class="action-add-car">
        <template v-if="myPosition.length>0">已关联{{myPosition.length}}仓位</template>
        <template v-else>暂无关联仓位</template>
        <span class="iconfont icon-zengjia" @click="handlePosition('add','')"></span>
      </div>
      <mt-cell v-for="(item,index) in myPosition" :title="item.location" @click.native="handlePosition('edit',item)">
        <span @click.stop="handleDelete(item,index)" class="iconfont icon-shanchu1"></span>
      </mt-cell>
    </div>

    <div class="button-content">
        <mt-button type="primary" @click="handleSurePost">确定</mt-button>
    </div>

    <mt-popup
      v-model="popupAdd"
      position="right"
      class="popup-add">
      <template>
        <mt-field label="仓位" placeholder="请输入仓位" v-model="position.location"></mt-field>
      </template>
      <div class="button-content">
        <div class="button-block-6">
          <mt-button type="default" @click="popupAdd = false">取消</mt-button>
        </div>
        <div class="button-block-6">
          <mt-button type="primary" @click="handleConfirmCar">确定</mt-button>
        </div>
      </div>
    </mt-popup>
  </div>
</template>

<script>
  import {MessageBox,Toast} from 'mint-ui'
export default {
  props:{
    title:String,
  },
  data(){
    return{
      position:{
        location:'',
      },
      carType:'',
      popupAdd:false,
      customerType:[{
        name:'仓库信息'
      },{
        name:'关联仓位'
      }],
      currentType:'0',
      myPosition:[],
      post:{
        updated:[],
        inserted:[],
        deleted:[],
        depot:'',
        contactPerson:'',
        telephone:'',
        address:'',
        fitShop:'',
      }
    }
  },
  mounted(){
    this.$axios({
      method: 'post',
      url:'gp/bu/login!shopInfo.do',
    }).then((res)=>{
      if(res.data.statusCode==200){
      console.log(res)
      this.post.fitShop=res.data.object.shopId;
    }
  });
    this.getData();


  },
  methods:{

    /** 获取仓库仓位 **/
    getData() {

      if(this.$route.query.id!=undefined){

        /**获取仓库详情**/
        var params = new URLSearchParams();
        params.append('form.depotId',this.$route.query.id);
        this.$axios({
          method: 'post',
          url:'gp/bu/depot!getDepotDetail.do',
          data:params
        }).then((res)=>{
          this.post.depot=res.data.object.buDepot.depot
//          this.post.fitShop=res.data.object.buDepot.fitShop
          this.post.contactPerson=res.data.object.buDepot.contactPerson
          this.post.telephone=res.data.object.buDepot.telephone
          this.post.address=res.data.object.buDepot.address
      });

        /**获取仓位**/
        var params = new URLSearchParams();
        params.append('form.depotId',this.$route.query.id);
        this.$axios({
          method: 'post',
          url:'gp/bu/location!getLocationList.do',
          data:params
        }).then((res)=>{
          this.myPosition=res.data.rows;
        console.log(res,1111)
      });
      }
    },
    handleChange(item, index){
      this.currentType = index;
    },

    handlePosition(type,item){
      console.log(type,item)
      this.carType=type;
      if(type=='edit'){
        this.position=item
      }else{
        this.position={
          location:'',
        }
      }
      this.popupAdd=true;
    },
    handleDelete(item,index){
      this.myPosition.splice(index,1);
      if(item.locationId!=undefined){
        this.post.deleted.push(item);
      }else{
        for(var i=0;i<this.post.inserted.length;i++){
          if(this.post.inserted[i].location==item.location){

            this.post.inserted.splice(i,1);
          }
        }
      }
    },
    handleSurePost(){

      if(this.post.depot==''){
        Toast({
          message: '请输入仓库名称',
          position: 'middle',
          duration: 1000
        });
        return false;
      }

      var params = new URLSearchParams();
      params.append('form.depot',this.post.depot);
      params.append('form.telephone',this.post.telephone);
      params.append('form.contactPerson',this.post.contactPerson);
      params.append('form.fitShop',this.post.fitShop);
      params.append('form.address',this.post.address);
      params.append('form.isActive','0101');
      params.append('form.inserted',JSON.stringify(this.post.inserted));
      if(this.$route.query.id){
        params.append('form.depotId',this.$route.query.id);
        params.append('form.deleteMark','0');
        params.append('form.deleted',JSON.stringify(this.post.deleted));
        params.append('form.updated',JSON.stringify(this.post.updated));
      }else{

        params.append('form.deleteMark','');
      }

      this.$axios({
        method: 'post',
        url:'gp/bu/depot!saveDepot.do',
        data:params
      }).then((res)=>{


        if(res.data.result==true){
        Toast({
          message: res.data.message,
          position: 'middle',
          duration: 1500
        });
        setTimeout(()=>{
          this.$router.push({path:'/app-warehouse-list'})
      },1500)
      }else{
        Toast({
          message: res.data.message,
          position: 'middle',
          duration: 1500
        });
      }

    })

    },
    handleConfirmCar(){
      if(this.position.location==''){
        Toast({
          message: '请输入仓位',
          position: 'middle',
          duration: 1000
        });
        return false;
      }

      if(this.carType=='add'){
        for(var i=0;i<this.myPosition.length;i++){
          if(this.myPosition[i].location==this.position.location){
            Toast({
              message: '该仓位已存在',
              position: 'middle',
              duration: 1000
            });
            return false;
          }
        }
        this.myPosition.push(this.position)
        this.post.inserted.push(this.position)
      }else{

        this.post.updated.push(this.position)
      }
      this.popupAdd=false;
    }
  }
}
</script>
<style>
  .customer-add-edit{
    padding:44px 0 0;
  }
  .customer-add-edit .module-info{
    margin:0 0 12px;
  }
  .customer-add-edit .module-other{
    margin:0 0 12px;
  }
  .customer-add-edit .module-note{
    background: #fff;
    display: flex;
    padding:12px;
  }
  .customer-add-edit .module-note .note-title{
    font-size: 16px;
    width: 105px;
  }
  .customer-add-edit .module-note .note-textarea{
    width: 70%;
    height:60px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    border: 0;
    outline: 0;
    padding:0 10px;
    font-size: 16px;
    text-align: right;
  }
  .customer-add-edit .button-content{
    display: flex;
    padding:24px 36px;
  }
  .customer-add-edit .button-content .mint-button{
    width: 100%;
  }
  .customer-add-edit .button-content .mint-button--primary{
    background:#007EE5;
  }
  .customer-add-edit .module-info .mint-field-core{
    text-align: right;
    padding-right: 10px;
  }
  .customer-add-edit .module-other .mint-field-core{
    text-align: right;
    padding-right: 10px;
  }

  .customer-add-edit .popup-nature{
    width: 100%;
  }
  .customer-add-edit .action-add{
    position: absolute;
    top:18px;
    right:12px;
    color: #fff;
    font-size:14px;
    border-radius:3px;
    background:#007EE5;
    padding:6px 12px;
    text-align: center;
    z-index: 1000;
  }
  .customer-add-edit .select-operator{
    width: 100%;
    min-height:32px;
    border:none;
    outline:none;
    font-size: 16px;
    color: #666;
    background: none;
    text-align: right;
    /*direction: rtl;*/
  }
  .mint-field-select .mint-cell-title{
    width:70%;
  }
  .customer-add-edit .details-tab-button{
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    overflow: hidden;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.04);
  }
  .customer-add-edit .details-tab-button .item{
    display: flex;
    width: 50%;
    align-items: center;
    justify-content: center;
    padding:12px 0;
    font-size:15px;
  }
  .customer-add-edit .details-tab-button .item.active{
    border-bottom: 1px solid #007EE5;
    color: #007EE5;
  }
  .action-add-car{
    background: #fff;
    font-size: 15px;
    padding:16px 12px 4px 12px;
    overflow: hidden;
    /*line-height: 34px;*/
  }
  .action-add-car .iconfont{
    display: block;
    float: right;
    height: 32px;
    color: #007EE5;
    font-size: 22px;
  }
  .module-car .mint-cell{
    position: relative;
  }
  .module-car .icon-shanchu1{
    position: absolute;
    top:14px;
    right:12px;
    color: red;
    font-size: 20px;

  }
  .module-car .mint-cell-wrapper{
    padding: 0 46px 0 12px;
  }
  .customer-add-edit .popup-add{
    height: 100%;
    width: 90%;
  }
  .customer-add-edit .popup-add .button-content{
    background: #fff;
    font-size:0;
    padding:24px;
  }
  .customer-add-edit .popup-add .button-block-6{
    display: inline-block;
    width: 50%;
    padding:0 10px;
  }
  .customer-add-edit .popup-add .button-block-6 .mint-button{
    display: block;
    width: 100%;
  }
</style>
